<template>
  <div class="likeCard">
    <my-card>
      <template #headInfo>
        <div class="headInfo">
          <i class="fa fa-heart"></i>
          <span style="margin-left: 10px">我的爱好</span>
        </div>
      </template>
      <template #bottomContent>
        <div class="bottomContent">
          <div class="favBox">
            <div
              :class="{ favItem: true, favActive: favData.favList[index] }"
              v-for="(item, index) in options"
              :key="index"
              @click="changeFavState(index)"
            >
              <i :class="item.icon" style="font-size: 25px"></i>
              <span style="margin-top: 5px">{{ item.text }}</span>
              <div
                :class="{ circle: true, circleActive: favData.favList[index] }"
              >
                <i class="fa fa-check" v-if="favData.favList[index]"></i>
              </div>
            </div>
          </div>
        </div>
      </template>
    </my-card>
    <el-button type="danger" class="saveBtn" @click="handleSaveFav"
      >保存信息</el-button
    >
  </div>
</template>

<script setup>
import { onMounted, reactive } from "vue";
import myCard from "@/components/my/myCard.vue";
import { ElMessage } from "element-plus";
import Cache from "@/utils/Cache";
const options = [
  {
    icon: "fa fa-hotel",
    text: "休闲",
  },
  {
    icon: "fa fa-bicycle",
    text: "体育",
  },
  {
    icon: "fa fa-grav",
    text: "冒险",
  },
  {
    icon: "fa fa-hand-rock-o",
    text: "动作",
  },
  {
    icon: "fa fa-automobile",
    text: "竞速",
  },
  {
    icon: "fa fa-gamepad",
    text: "角色扮演",
  },
  {
    icon: "fa fa-hourglass-half",
    text: "策略",
  },
  {
    icon: "fa fa-globe",
    text: "网游",
  },
];
const favData = reactive({
  favList: [],
});

onMounted(() => {
  initFavData();
});

// 监听爱好点击：更改状态
const changeFavState = (index) => {
  favData.favList[index] = favData.favList[index] ? 0 : 1;
};

// 初始化爱好
const initFavData = () => {
  favData.favList = Cache.getItem("user").fav;
};

// 点击保存爱好信息
const handleSaveFav = () => {
  const user = Cache.getItem("user");
  user.fav = favData.favList;
  ElMessage({
    message: "保存成功！",
    type: "success",
    center: true,
  });
  Cache.saveItem("user", user);
};
</script>

<style scoped lang="less">
.likeCard {
  position: relative;
  width: 100%;
  margin-bottom: 30px;
  .headInfo {
    color: rgb(49, 145, 215);
    font-size: 18px;
    letter-spacing: 0.1em;
  }
  .bottomContent {
    display: flex;
    justify-content: center;
    align-items: center;
    .favBox {
      width: 600px;
      height: 300px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      .favItem {
        position: relative;
        cursor: pointer;
        margin-left: 50px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100px;
        height: 100px;
        color: rgb(150, 163, 165);
        border: 2px solid rgb(218, 225, 226);
        border-radius: 8px;
        box-shadow: 0 5px 10px rgba(#000, 0.1);
        transition: all 0.3s;
        .circle {
          position: absolute;
          width: 20px;
          height: 20px;
          border: 2px solid rgb(190, 198, 199);
          transform: scale(0);
          border-radius: 50%;
          left: 5px;
          top: 5px;
          transition: all 0.3s;
        }
        &:hover {
          color: #2260ff;
          border-color: #2260ff;
          box-shadow: 0 0 5px #2260ff;
        }
        &:hover .circle {
          transform: scale(1);
        }
      }
      .favActive {
        color: #2260ff;
        border-color: #2260ff;
        box-shadow: 0 0 5px #2260ff;
      }
      .circleActive {
        transform: scale(1);
        background-color: #2260ff;
        color: #fff;
      }
    }
  }
  .saveBtn {
    position: absolute;
    bottom: 10px;
    right: 20px;
  }
}
</style>
